<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查询计划</title>
    <link rel="stylesheet" href="../js/element-ui-2.13.0/lib/theme-chalk/index.css">
    <style>
        #whole {
            margin: 0 auto;
            width: 500px;
            height: 600px;
            display: flex;
            justify-content: center; /*实现水平居中*/
            align-items: center; /*实现垂直居中*/
            top: 50%;
            left: 50%;
            position: absolute;
            margin: -250px 0 0 -250px;
            background: #a0e274;
        }

        body {
            background: #a0e274;
        }
    </style>
    <script src="../js/vue.js"></script>
    <script src="../js/element-ui-2.13.0/lib/index.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
</head>
<body>
<div id="whole">
    <div>
        <el-link href="schedules.html">回到计划首页<i class="el-icon-view el-icon--right"></i> </el-link>
        <br>
        <el-select style="width: 382.5px" v-model="params.scheduleType" placeholder="请选择计划类型" clearable>
            <el-option label="所有计划类型"></el-option>
            <el-option
                    v-for="item in schedulesTypes"
                    :label="item.label"
                    :value="item.value">
            </el-option>
        </el-select>
        <el-date-picker
                style="width: 382.5px"
                v-model="params.startDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择计划日期">
        </el-date-picker>
        <el-button style="width: 770px" type="primary" @click="querySchedules">查询</el-button>
        <template>
            <el-table
                    :cell-style="{'text-align':'center'}"
                    :data="tableData.data"
                    border
                    style="width: 100%">
                <el-table-column
                        align="center"
                        fixed
                        prop="index"
                        label="序号"
                        width="50px"
                >
                </el-table-column>
                <el-table-column
                        align="center"
                        fixed
                        prop="scheduleType"
                        label="任务类型"
                        width="100px"
                >
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="scheduleContent"
                        width="220px"
                        label="任务内容">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="startTime"
                        width="100px"
                        label="开始时间">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="endTime"
                        width="100px"
                        label="结束时间">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="finishStatus"
                        label="完成状态"
                        width="100px" >
                    <template slot-scope="scope">
                        <el-switch
                                v-model="scope.row.finishStatus"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                active-value="完成"
                                inactive-value="未完成"
                                @change="changeFinishStatus(scope.row)"
                        >
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        fixed="right"
                        label="操作"
                        width="100px">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
                        <el-button @click="updateSchedule(scope.row)" type="text" size="small">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="params.pageNum"
                    :page-sizes="[5, 10]"
                    :page-size="params.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="tableData.total">
            </el-pagination>
        </template>
    </div>
</div>
</body>
<script>
    const app = new Vue({
        el: '#whole',
        data: {
            params: {
                pageNum: 1,
                pageSize: 10,
                startDate: ""
            },
            schedulesTypes: [],
            tableData: {
                total: 10,
                data: []
            }
        },
        methods: {
            updateSchedule(row){
                localStorage.setItem("id",row.id);
                window.location.href="updateSchedule.html";
            },
            changeFinishStatus(row){
                if (row.finishStatus === "完成"){
                    this.params.isFinish = 1;
                }else if (row.finishStatus === "未完成"){
                    this.params.isFinish = 0;
                }
                this.params.id = row.id;
                axios.post('https://3723r72n06.picp.vip/mylife/schedule/changeFinishStatus', this.params, {headers: {'conTent-Type': 'application/json'}}).then(response => {
                    if (response.data.code == 200) {
                        this.$message.success(response.data.msg);
                    } else if (response.data.code == 1010) {
                        this.$message.warning(response.data.msg);
                    }
                });
            },
            handleClick(row){
                this.$confirm('此操作将永久删除该任务, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.params.id = row.id;
                    axios.post('https://3723r72n06.picp.vip/mylife/schedule/deleteSchedule', this.params, {headers: {'conTent-Type': 'application/json'}}).then(response => {
                        if (response.data.code == 200) {
                            this.$message.success(response.data.msg);
                            this.querySchedules();
                        } else if (response.data.code == 1009) {
                            this.$message.warning(response.data.msg);
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            dealCookie() {
                // 对cookie操作
                var cookies = document.cookie;
                var cookie_array = cookies.split(";");
                for (var i = 0; i < cookie_array.length; i++) {
                    var cookie = cookie_array[i];
                    var array = cookie.split("=");
                    if (array[0] == "realName") {
                        this.params.realName = array[1];
                    }
                    if (array[0] == " username") {
                        this.params.username = array[1];
                    }
                }
            },
            handleSizeChange(val) {
                this.params.pageSize = val;
                this.querySchedules();
            },
            handleCurrentChange(val) {
                this.params.pageNum = val;
                this.querySchedules();
            },
            querySchedules(){
                axios.post('https://3723r72n06.picp.vip/mylife/schedule/querySchedules', this.params, {headers: {'conTent-Type': 'application/json'}}).then(response => {
                    this.tableData.data = response.data;
                    this.tableData.total = response.data[0].total;
                });
            },
            queryScheduleType() {
                axios.post('https://3723r72n06.picp.vip/mylife/schedule/queryScheduleType', "", {headers: {'conTent-Type': 'application/json'}}).then(response => {
                    response.data.forEach(item => {
                        let arr = {
                            value: item,
                            label: item
                        };
                        this.schedulesTypes.push(arr);
                    });
                });
            },
            getDate() {
                let date = new Date();
                let year = date.getFullYear();
                let month = date.getMonth() + 1;
                if (month < 10) {
                    month = "0" + month;
                }
                let day = date.getDate();
                if (day < 10) {
                    day = "0" + day;
                }
                let hour = date.getHours();
                if (hour < 10) {
                    hour = "0" + hour;
                }
                let minute = date.getMinutes();
                if (minute < 10) {
                    minute = "0" + minute;
                }
                let second = date.getSeconds();
                if (second < 10) {
                    second = "0" + second;
                }
                this.params.startDate = year + "-" + month + "-" + day;
            },
        },
        mounted() {
            this.dealCookie();
            this.getDate();
            this.queryScheduleType();
            this.querySchedules();
        }
    });
</script>
</html>